<template>
    <el-card
        v-bind="$attrs"
        :class="isShow ? '' : 'hide-meta-content-card-body'"
    >
        <template #header>
            <div class="flex a-center j-between">
                <div class="flex f-1 a-center">
                    <MetaIcon
                        v-if="props.isShowIcon"
                        class="m-right-10 pointer"
                        name="DArrowRight"
                        color="#409EFF"
                        :size="20"
                        :style="
                            isShow
                                ? 'transform: rotate(-90deg)'
                                : 'transform: rotate(90deg)'
                        "
                        @click="isShow = !isShow"
                    ></MetaIcon>
                    <slot name="header"></slot>
                </div>
                <div v-if="props.isSearch">
                    <slot name="header-right"></slot>
                    <el-button
                        v-if="!props.isHideSearch"
                        type="primary"
                        text
                        @click="emits('search')"
                        style="font-size: 14px"
                        size="small"
                        ><MetaIcon name="Search"></MetaIcon
                        ><span>{{ searchText }}</span></el-button
                    >
                    <el-button
                        v-if="!props.isHideReset"
                        type="primary"
                        text
                        @click="emits('reset')"
                        style="font-size: 14px"
                        size="small"
                        ><MetaIcon name="Refresh"></MetaIcon
                        ><span>重置</span></el-button
                    >
                </div>
            </div>
        </template>
        <div v-show="isShow" style="height: 100%">
            <slot></slot>
        </div>
    </el-card>
</template>
<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const props = defineProps({
    isShowIcon: {
        type: Boolean,
        default: true
    },
    isSearch: {
        type: Boolean,
        default: false
    },
    searchText: {
        type: String,
        default: '查询'
    },
    isHideSearch: {
        type: Boolean,
        default: false
    },
    isHideReset: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['search', 'reset'])
</script>
<style lang="scss" scoped>
.hide-meta-content-card-body {
    :deep(.el-card__body) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
.el-card.f-all {
    height: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    :deep(.el-card__body) {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        .el-tabs {
            height: 100%;
            .el-tab-pane {
                height: 100%;
            }
        }
    }
}
.el-button.is-text {
    padding: 3px 5px;
}
.el-button.is-text + .el-button.is-text {
    margin-left: 5px;
}
</style>
